<script setup lang="ts" name="Role">
import { quasarFormStyle } from '@/setting.ts';
import MyQTable from '@/components/MyQTable.vue';
import { ref, onBeforeMount } from 'vue';
import type { QTableColumn } from 'quasar';
import { reqGetRoleList, reqDeleteRole } from '@/api/acl/role.ts';
import type { Role } from '@/api/acl/role-type.ts';
import FormDialog from './components/FormDialog.vue';
import SetPermission from './components/SetPermission.vue';
import { useQuasar } from 'quasar';
import { useCompRef } from '@/utils/useCompRef.ts';
import { useRemoveItem } from '@/hooks/useRemoveItem';

const { notify } = useQuasar();
// 搜索
const search = ref<string>('');
function resetSearch() {
  if (search.value === '') return;
  search.value = '';
  getRoleList();
}
// 表格列
const columns: QTableColumn[] = [
  {
    name: 'index',
    label: '#',
    field: '',
    align: 'center'
  },
  { name: 'id', label: '编号', field: 'id', align: 'center' },
  {
    name: 'roleName',
    label: '职位名称',
    field: 'roleName',
    align: 'left',
    classes: 'text-overflow',
    style: 'max-width: 100px'
  },
  {
    name: 'createTime',
    label: '创建时间',
    field: 'createTime',
    align: 'left',
    classes: 'text-overflow',
    style: 'max-width: 100px'
  },
  {
    name: 'updateTime',
    label: '更新时间',
    field: 'updateTime',
    align: 'left',
    classes: 'text-overflow',
    style: 'max-width: 100px'
  },
  { name: 'control', label: '操作', field: 'id', align: 'left' }
];
const pagination = ref({
  page: 1, // 当前页数
  rowsPerPage: 5, // 每页数据个数
  rowsNumber: 0, // 总数
  sortBy: '',
  descending: false
});
// 用户信息列表
const roleList = ref<Role[]>([]);
const loading = ref<boolean>(false);
// 获取用户列表
async function getRoleList() {
  loading.value = true;
  try {
    const result = await reqGetRoleList(
      pagination.value.page,
      pagination.value.rowsPerPage,
      search.value
    );
    if (result.code === 200) {
      roleList.value = result.data.records;
      pagination.value.rowsNumber = result.data.total;
    } else {
      throw new Error('获取用户列表失败');
    }
  } catch (error: any) {
    notify({
      type: 'negative',
      message: error.message,
      position: 'top'
    });
  } finally {
    loading.value = false;
  }
}
// 表格数据
function getTableData(page: number, rowsPerPage: number) {
  pagination.value.page = page;
  pagination.value.rowsPerPage = rowsPerPage;
  getRoleList();
}

// 用户表单组件
const formDialog = useCompRef(FormDialog);
function refreshData(flag?: string) {
  if (flag) {
    getRoleList();
  }
}

// 权限分配组件
const setPermission = useCompRef(SetPermission);

// 删除用户
function removeRole(id: number) {
  useRemoveItem(reqDeleteRole, id, '确认删除该角色吗？', getRoleList);
}

onBeforeMount(() => {
  getRoleList();
});
</script>

<template>
  <div>
    <q-card>
      <q-card-section>
        <div class="row justify-between items-center">
          <div class="col-5">
            <q-input
              v-bind="quasarFormStyle"
              dense
              placeholder="请输入搜索用户名"
              v-model.trim="search"
            ></q-input>
          </div>
          <div class="col-3 q-gutter-md">
            <q-btn
              label="搜索"
              size="md"
              color="primary"
              :disabled="!search"
              @click="getRoleList"
            ></q-btn>
            <q-btn
              label="重置"
              size="md"
              color="primary"
              @click="resetSearch"
            ></q-btn>
          </div>
        </div>
      </q-card-section>
    </q-card>
    <!-- 用户表格 -->
    <q-card class="q-mt-md">
      <q-card-section>
        <div class="q-gutter-md">
          <authority permission="btn.Role.add" #="{ hasPermission }">
            <q-btn
              label="添加用户"
              color="primary"
              size="md"
              @click="formDialog?.showFormDialog('SAVE')"
              :disabled="!hasPermission"
            ></q-btn>
          </authority>
        </div>
      </q-card-section>
      <q-card-section>
        <my-q-table
          :data="roleList"
          :columns="columns"
          @get-table-data="getTableData"
          :wrap-cells="false"
          v-model:pagination="pagination"
          use-pagination
          :loading="loading"
        >
          <template #body-cell-control="{ row }">
            <q-td>
              <template
                class="flex items-center flex-nowrap q-gutter-xs"
                style="min-width: 160px"
              >
                <authority permission="btn.Role.assgin" #="{ hasPermission }">
                  <q-btn
                    size="xs"
                    color="secondary"
                    dense
                    label="分配权限"
                    icon="person"
                    @click="setPermission?.showDrawer(row.id)"
                    :disabled="!hasPermission"
                  ></q-btn>
                </authority>
                <authority permission="btn.Role.update" #="{ hasPermission }">
                  <q-btn
                    size="xs"
                    color="warning"
                    dense
                    label="编辑"
                    icon="edit_note"
                    @click="formDialog?.showFormDialog('UPDATE', row)"
                    :disabled="!hasPermission"
                  ></q-btn>
                </authority>
                <authority permission="btn.Role.remove" #="{ hasPermission }">
                  <q-btn
                    size="xs"
                    color="negative"
                    dense
                    label="删除"
                    icon="delete_outline"
                    @click="removeRole(row.id)"
                    :disabled="!hasPermission"
                  ></q-btn>
                </authority>
              </template>
            </q-td>
          </template>
        </my-q-table>
      </q-card-section>
    </q-card>
    <!-- 表单栏 -->
    <FormDialog ref="formDialog" @refreshData="refreshData" />
    <!--  -->
    <SetPermission ref="setPermission" />
  </div>
</template>

<style></style>
